    // Data management
    let data = [
    { id: 1, name: '张美丽', position: '美容师', description: '专业美容师' },
    { id: 2, name: '刘丽丽', position: '美容师', description: '资深美容师' },
    { id: 3, name: '韩慧慧', position: '美容师', description: '高级美容师' },
    { id: 4, name: '刘文静', position: '美容师', description: '美容顾问' }
    ];
    let currentPage = 1;
    const itemsPerPage = 5;
    let selectedItems = new Set();
    let currentDeleteId = null;

    // Initialize
    document.addEventListener('DOMContentLoaded', () => {
    renderTable();
    setupEventListeners();
});

    function setupEventListeners() {
    // Search functionality
    document.getElementById('searchInput').addEventListener('input', (e) => {
        renderTable(e.target.value);
    });

    // Select all checkbox
    document.getElementById('selectAll').addEventListener('change', (e) => {
    const checkboxes = document.querySelectorAll('.item-checkbox');
    checkboxes.forEach(checkbox => {
    checkbox.checked = e.target.checked;
    const id = parseInt(checkbox.dataset.id);
    if (e.target.checked) {
    selectedItems.add(id);
} else {
    selectedItems.delete(id);
}
});
    updateBatchDeleteButton();
});

    // Edit form submission
    document.getElementById('editForm').addEventListener('submit', (e) => {
    e.preventDefault();
    saveData();
});

    // Image upload
    document.getElementById('imageUpload').addEventListener('click', () => {
    document.getElementById('fileInput').click();
});
}

    function renderTable(searchTerm = '') {
    const filteredData = data.filter(item =>
    !searchTerm ||
    item.name.includes(searchTerm) ||
    item.id.toString().includes(searchTerm)
    );

    const start = (currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const pageData = filteredData.slice(start, end);

    const tbody = document.getElementById('tableBody');
    tbody.innerHTML = '';

    pageData.forEach((item, index) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
                    <td>
                        <input type="checkbox" class="checkbox item-checkbox"
                               data-id="${item.id}"
                               ${selectedItems.has(item.id) ? 'checked' : ''}>
                    </td>
                    <td>${start + index + 1}</td>
                    <td>${item.name}</td>
                    <td>${item.position}</td>
                    <td>${item.description}</td>
                    <td>
                        <a class="action-link" onclick="showEditModal(${item.id})">编辑</a>
                        <a class="action-link delete" onclick="showDeleteModal(${item.id})">删除</a>
                    </td>
                `;
    tbody.appendChild(tr);
});

    // Update checkbox listeners
    document.querySelectorAll('.item-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', (e) => {
    const id = parseInt(e.target.dataset.id);
    if (e.target.checked) {
    selectedItems.add(id);
} else {
    selectedItems.delete(id);
}
    updateBatchDeleteButton();
});
});

    // Update total count
    document.getElementById('totalCount').textContent = `共${filteredData.length}条数据`;
    updateBatchDeleteButton();
}

    function updateBatchDeleteButton() {
    const batchDeleteBtn = document.getElementById('batchDeleteBtn');
    batchDeleteBtn.disabled = selectedItems.size === 0;
}

    // Modal functions
    function showEditModal(id = null) {
    const modal = document.getElementById('editModal');
    const modalTitle = document.getElementById('modalTitle');
    const editId = document.getElementById('editId');
    const editName = document.getElementById('editName');
    const editPosition = document.getElementById('editPosition');
    const editDescription = document.getElementById('editDescription');

    if (id) {
    const item = data.find(x => x.id === id);
    modalTitle.textContent = '编辑';
    editId.value = item.id;
    editName.value = item.name;
    editPosition.value = item.position;
    editDescription.value = item.description;
} else {
    modalTitle.textContent = '新增';
    editId.value = '';
    editName.value = '';
    editPosition.value = '';
    editDescription.value = '';
}

    modal.classList.add('show');
}

    function hideEditModal() {
    document.getElementById('editModal').classList.remove('show');
}

    function showDeleteModal(id = null) {
    currentDeleteId = id;
    document.getElementById('deleteModal').classList.add('show');
}

    function hideDeleteModal() {
    document.getElementById('deleteModal').classList.remove('show');
    currentDeleteId = null;
}

    function showDeleteMultipleModal() {
    if (selectedItems.size > 0) {
    showDeleteModal();
}
}

    // Data operations
    function saveData() {
    const editId = document.getElementById('editId').value;
    const newData = {
    name: document.getElementById('editName').value,
    position: document.getElementById('editPosition').value,
    description: document.getElementById('editDescription').value
};

    if (editId) {
    // Update existing item
    const index = data.findIndex(x => x.id === parseInt(editId));
    data[index] = { ...data[index], ...newData };
} else {
    // Add new item
    const newId = Math.max(...data.map(x => x.id), 0) + 1;
    data.push({ id: newId, ...newData });
}

    hideEditModal();
    renderTable();
}

    function confirmDelete() {
    if (currentDeleteId) {
    // Delete single item
    data = data.filter(x => x.id !== currentDeleteId);
} else {
    // Delete multiple items
    data = data.filter(x => !selectedItems.has(x.id));
    selectedItems.clear();
}

    hideDeleteModal();
    renderTable();
}

    // Pagination
    function prevPage() {
    if (currentPage > 1) {
    currentPage--;
    renderTable();
}
}

    function nextPage() {
    const maxPage = Math.ceil(data.length / itemsPerPage);
    if (currentPage < maxPage) {
    currentPage++;
    renderTable();
}
}